import { ref, reactive, shallowRef } from 'vue';
import echarts from '@/echarts';
import { PieSeriesOption, EChartsOption } from 'echarts';
import { EChartsCoreOption, EChartsType } from 'echarts/core';
import type { DateItem, LineChartType, MuSelectValueType } from '../data';

import { getHtmlFontPX, handleChartResize } from '@/utils/base';
import ThemeColor from '@/themeColor';
import { colorList, dateList } from '../config';

export default function (
	showHandler?: (visible: boolean, type: number, selectValue: MuSelectValueType) => void
): LineChartType {
	const chartRef = shallowRef<EChartsType>();
	const container = ref<HTMLDivElement | undefined>();
	const chart = reactive<LineChartType['chart']>({
		selectValue: [4, 8, 9],
		initChart,
		resizeChart,
		extraOption: {}
	});

	/**
	 * @returns 返回option配置
	 */
	const option: EChartsOption = {
		color: colorList,
		tooltip: {
			trigger: 'item'
		},
		legend: {
			right: '0%',
			orient: 'vertical',
			textStyle: {
				color: '#fff6d1' //字体颜色
			}
		},
		series: [
			{
				name: '党员学历',
				type: 'pie',
				radius: ['50%', '90%'],
				avoidLabelOverlap: false,

				label: {
					normal: {
						formatter: '{b}\n \n{d}%',
						textStyle: {
							fontWeight: 'normal',
							fontSize: 16
						},
						show: true,
						position: 'center',
						color: '#fff6d1'
					}
				},

				labelLine: {
					show: false
				},
				data: [
					{ value: 0, name: '硕士' },
					{ value: 0, name: '博士' },
					{ value: 0, name: '其他' },
					{ value: 0, name: '大专' },
					{ value: 0, name: '本科' }
				]
			}
		]
	};

	/**
	 * 初始化图表
	 * @param container 图表容器id
	 */
	function initChart(nodes: PieSeriesOption['data']): any {
		if (!container.value) return;
		option.series[0].data.forEach((item, index) => {
			item.value = Object.values(nodes)[index];
		});
		chartRef.value = echarts.init(container.value);
		chartRef.value && chartRef.value.setOption(option);
	}

	/**
	 * @description 重新set一下resize后的字体 不然会有偏移
	 */
	function resetFontSize() {
		// 需要重新计算字体不然依旧会有点偏差
		chartRef.value && chartRef.value.setOption(option);
	}

	/**
	 * @description 处理图表resize
	 */
	function resizeChart() {
		if (chartRef.value) {
			handleChartResize(chartRef.value);
			resetFontSize();
		}
	}

	/**
	 * @description 自定义toolbox restore方法
	 */
	// function handleRestore() {
	// 	const option = getOption();
	// 	if (chartRef.value) {
	// 		chartRef.value.clear();
	// 		chartRef.value.setOption(option);
	// 	}
	// }

	return {
		chart,
		container,
		chartRef
	};
}
